{% extends "base.html" %}

{% block title %}错误 - 交易监控系统{% endblock %}

{% block head_extra %}
<style>
    .error-container {
        text-align: center;
        padding: 40px 20px;
        max-width: 800px;
        margin: 0 auto;
    }
    
    .error-icon {
        font-size: 64px;
        color: #e74c3c;
        margin-bottom: 20px;
    }
    
    .error-title {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 15px;
        color: #333;
    }
    
    .error-message {
        font-size: 16px;
        color: #555;
        margin-bottom: 30px;
        line-height: 1.5;
    }
    
    .error-actions {
        margin-top: 30px;
    }
    
    .btn {
        display: inline-block;
        padding: 10px 20px;
        margin: 0 10px;
        border-radius: 4px;
        text-decoration: none;
        font-weight: bold;
        transition: background-color 0.3s;
    }
    
    .btn-primary {
        background-color: #3498db;
        color: white;
    }
    
    .btn-warning {
        background-color: #f39c12;
        color: white;
    }
    
    .btn:hover {
        opacity: 0.9;
    }
    
    .error-details {
        margin-top: 40px;
        text-align: left;
        background-color: #f8f9fa;
        padding: 15px;
        border-radius: 4px;
        border-left: 4px solid #e74c3c;
    }
    
    .error-details pre {
        margin: 0;
        white-space: pre-wrap;
        font-family: monospace;
        font-size: 14px;
        color: #555;
    }
    
    .error-details-toggle {
        color: #3498db;
        cursor: pointer;
        margin-top: 20px;
        display: inline-block;
    }
</style>
{% endblock %}

{% block content %}
<div class="error-container">
    <div class="error-icon">
        <i class="fas fa-exclamation-triangle"></i>
    </div>
    
    <h1 class="error-title">{{ title }}</h1>
    
    <div class="error-message">
        {{ message }}
    </div>
    
    <div class="error-actions">
        {% if show_config_button %}
        <a href="/database_config" class="btn btn-primary">
            <i class="fas fa-cog"></i> 修改数据库配置
        </a>
        {% endif %}
        
        {% if show_sqlite_button %}
        <a href="/switch_to_sqlite" class="btn btn-warning">
            <i class="fas fa-database"></i> 切换到SQLite数据库
        </a>
        {% endif %}
        
        <a href="/db_config_editor" class="btn btn-warning">
        </a>
        
        <a href="/" class="btn btn-primary">
            <i class="fas fa-home"></i> 返回首页
        </a>
    </div>
    
    {% if error_details %}
    <div class="error-details-toggle" onclick="toggleErrorDetails()">
        <i class="fas fa-chevron-down"></i> 显示详细错误信息
    </div>
    
    <div class="error-details" id="errorDetails" style="display: none;">
        <pre>{{ error_details }}</pre>
    </div>
    {% endif %}
</div>

<script>
    function toggleErrorDetails() {
        const details = document.getElementById('errorDetails');
        const toggle = document.querySelector('.error-details-toggle');
        
        if (details.style.display === 'none') {
            details.style.display = 'block';
            toggle.innerHTML = '<i class="fas fa-chevron-up"></i> 隐藏详细错误信息';
        } else {
            details.style.display = 'none';
            toggle.innerHTML = '<i class="fas fa-chevron-down"></i> 显示详细错误信息';
        }
    }
</script>
{% endblock %}